<template>
  <div class="exam-container">
    <el-card class="box-card">
      <div class="search">
        <div class="item">
              <span>试卷Id：</span>
              <el-input 
                  placeholder="请输入试卷id"
                  style="width: 300px"
                  v-model="query.id"
                  clearable 
                  @clear="getExamPaperList"></el-input>
        </div>
        <div class="item">
              <span>试卷类型：</span>
              <el-select placeholder="请选择试卷类型" v-model="query.paperType" style="width:300px;" clearable @clear="getExamPaperList">
                <el-option label="班级试卷" value="4"></el-option>
              </el-select>
        </div>
        <div class="item">
                <span>年级：</span>
                <el-select 
                  placeholder="请选择年级"
                  @change="changeLevel"
                  v-model="query.level" 
                  disabled
                  style="width:300px;margin-right:18px;"
                  clearable @clear="getExamPaperList">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
          </div>
          <div class="item">
                <span>学科：</span>
                <el-select placeholder="请选择学科" v-model="query.subjectId" style="width:300px;" clearable @clear="getExamPaperList">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
           </div>
        
          <el-button type="primary" class="searchBtn" @click="getExamPaperList">查询</el-button>
          <el-button type="primary" class="addBtn" icon="el-icon-plus" @click="addPaper">添加试卷</el-button>
      </div>
      <div class="table">
        <el-table
            width="100%"
            :data="examPaperList"
            stripe border>
            <el-table-column
              prop="id"
              label="id"
              width="60px">
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="学科">
            </el-table-column>
            <el-table-column label="年级" width="120px">
              <template slot-scope="scope">
                <span v-if="scope.row.gradeLevel=== 1">一年级</span>
                <span v-if="scope.row.gradeLevel=== 2">二年级</span>
                <span v-if="scope.row.gradeLevel=== 3">三年级</span>
                <span v-if="scope.row.gradeLevel=== 4">四年级</span>
                <span v-if="scope.row.gradeLevel=== 5">五年级</span>
                <span v-if="scope.row.gradeLevel=== 6">六年级</span>
                <span v-if="scope.row.gradeLevel=== 7">初一</span>
                <span v-if="scope.row.gradeLevel=== 8">初二</span>
                <span v-if="scope.row.gradeLevel=== 9">初三</span>
                <span v-if="scope.row.gradeLevel=== 10">高一</span>
                <span v-if="scope.row.gradeLevel=== 11">高二</span>
                <span v-if="scope.row.gradeLevel=== 12">高三</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称"  />
            <el-table-column label="试卷类型">
              <template slot-scope="scope">
                 <span v-if="scope.row.paperType === 1">固定试卷</span>
                 <span v-if="scope.row.paperType === 2">时段试卷</span>
                 <span v-if="scope.row.paperType === 3">任务试卷</span>
                 <span v-if="scope.row.paperType === 4">班级试卷</span>
                 <span v-if="scope.row.paperType === 5">智能试卷</span>
              </template>
            </el-table-column>
            <el-table-column prop="classes" label="班级"/>
            <el-table-column label="创建时间" width="180px">
              <template slot-scope="scope">
                  {{scope.row.createTime | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template slot-scope="scope">
                  <div class="btns">
                    <el-button class="btn" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button class="btn" @click="showPaper(scope.row.id)">查看</el-button>
                    <el-button class="btn" @click="deletePaper(scope.row.id)">删除</el-button>
                  </div>
                </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                class="pagination"
                :current-page="query.pageIndex"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
          </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //查询参数
      query: {
        pageIndex: 1,
        pageSize: 5,
        id: null,
        level: null,
        subjectId: null,
        paperType: 4+''
      },
      total: 0, //总数
      subjectList:[], //学科列表
      examPaperList:[], //试卷列表
      //年级选择
      options: [{
          value: '1',
          label: '一年级'
        }, {
          value: '2',
          label: '二年级'
        }, {
          value: '3',
          label: '三年级'
        }, {
          value: '4',
          label: '四年级'
        }, {
          value: '5',
          label: '五年级'
        }, {
          value: '6',
          label: '六年级'
        }, {
          value: '7',
          label: '初一'
        }, {
          value: '8',
          label: '初二'
        }, {
          value: '9',
          label: '初三'
        }, {
          value: '10',
          label: '高一'
        }, {
          value: '11',
          label: '高二'
        }, {
          value: '12',
          label: '高三'
        }]
    }
  },
  created(){
    let user = JSON.parse(window.sessionStorage.getItem("user"));
    if( user == null){ //还没有登录
      this.$router.replace("/");
      return false;
    }
    //获取学科列表
    this.changeLevel(user.userLevel);
    this.query.level = user.userLevel+'';
    this.getExamPaperList();
  },
  methods:{
    //试卷查看
    showPaper(id){
      this.$router.replace({path: "/teacher/exam/read",query:{'examPaperId':id}})
    },
     //切换班级时
    changeLevel(value){
      this.getRequest("/api/teacher/subject/listBylevel",{
        level: value
      }).then( resp => {
        if(resp && resp.code == 200){
          this.subjectList = resp.obj;
        }
      })
    },
    //查询试卷列表
    async getExamPaperList(){
       const resp = await this.getRequest("/api/teacher/exam/paper/page",{
        pageIndex: this.query.pageIndex,
        pageSize: this.query.pageSize,
        level: this.query.level,
        paperType:this.query.paperType,
        id: this.query.id,
        subjectId : this.query.subjectId
      });
      if(resp){
        this.examPaperList = resp.data;
        this.total = resp.total;
      }
      
    },
    //监听pagesize改变的事件
    handleSizeChange(newSize) {
        //console.log(newSize);
        this.query.pageSize = newSize
        this.getExamPaperList();
    },
    //监听页码值改变的事件
    handleCurrentChange(newPage) {
        //console.log(newPage);
        this.query.pageIndex = newPage
        this.getExamPaperList();
    },
    //删除试卷
    deletePaper(id){
      this.$confirm('此操作将删除该试卷, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.deleteRequest("/api/teacher/exam/paper/delete/"+id).then(resp=>{
              if(resp.code == 200){ //删除成功
                //重新获取用户列表
                this.getExamPaperList();
              }
            })
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消操作'
            });          
        });
    },
    //添加试卷操作
    addPaper(){
      this.$router.replace("/teacher/exam/create");
    },
    //编辑试卷
    edit(id){
      console.log(id);
      this.$store.commit("initExamPaperId",id);
      //跳转创建页面
      this.$router.replace("/teacher/exam/create");
    }
  }
}
</script>

<style lang="scss" scoped>
.exam-container{
  font-family: "华文楷体";
  .box-card{
    border-radius: 10px;
    color:#1A1A1A;
    .search{
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .item{
          margin: 10px 10px;
          
        }
        .searchInput{
          margin-left: 10px;
          border:1px solid #1980FF;
          border-radius: 4px;
        }
        .searchBtn{
          font-family: "华文楷体";
          margin: 0 0 0 20px;
        }
        .addBtn{
          font-family: "华文楷体";
        }
     }
     .table{
         margin-top: 10px;
         width: 100%;
         //内容居中
         /deep/.el-table th > .cell {
              text-align: center;
          }
          
          /deep/.el-table .cell {
              text-align: center;
          } 
          .btns{
            display: flex;
            justify-content: space-around;
          }
          .btn{
            border: none;
            font-size: 12px;
            margin:0 10px;
            padding: 0;
            cursor: pointer;
            &:nth-child(1){
              color:#1980FF;
            }
             &:nth-child(2){
              color:#66BB6A;
            }
             &:nth-child(3){
              color:#F56C6C;
            }
          }
      }
      .pagination{
        margin: 20px 0 0 0;
        display: flex;
        justify-content: flex-end;
      }
  }
}
</style>